<!DOCTYPE html>
<html lang="en">
<!-- 通过CZML添加几何形状
  而且CZML还可以描述动画(现在先有个印象，动画以后介绍) -->

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="./Build/CesiumUnminified/Cesium.js"></script>
  <style>
    @import url(./Build/CesiumUnminified//Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    const viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: true,//是否显示图层选择器 
    })

    let czml = [{
      'id': 'document',
      'name': 'box',
      'version': '1.0'
    },{
      'id': 'shape1',
      'name': 'Blue box with black outline',
      'position': {
        'cartographicDegrees': [104.303854,24.871046, 0.0]
      },
      'box': {
        'dimensions': {
          'cartesian': [400.0, 400.0, 400.0]
        },
        'material': {
          'solidColor': {
            'color': {
              'rgba': [0, 0, 255, 80]
            }
          }
        },
        'outline': true,
        'outlineColor': {
          'rgba': [0, 0, 0, 255]
        }
      }
    }];
    let dataSourcePromise = Cesium.CzmlDataSource.load(czml);
    viewer.dataSources.add(dataSourcePromise);
    viewer.zoomTo(dataSourcePromise);
  </script>
</body>

</html>